<!-- 安装列表 -->
<template>
  <div class="page-box h100 display-flex czbj">
    <p class="title-label">安装列表</p>
    <div class="btm mt10 pt10">
      <dxtable
        :dataJson="dataJson"
        :portUrl="portUrl"
        :qx="qx"
        ref="databale"
        :formJson="formJson"
        imgkuTitle="新闻图片"
        :czFun="czFun"
        bjtext="修改"
      ></dxtable>
    </div>
    <n-modal v-model:show="showModal" preset="card" style="width: 1200px">
      <template #header>
        <div>安装件选择</div>
      </template>
      <div class="btm pt20 kxpage">
        <InstallationComponentManagement
          pup="list"
          @callBack="callBack"
          :checkedRowKeys="checkedRowKeys"
        ></InstallationComponentManagement>
        <!--    <n-checkbox-group v-model:value="pupcheboxval">
          <n-space item-style="display: flex;">
            <n-checkbox
              v-for="(item, idx) in getazjxz"
              :key="idx"
              :value="item"
              :label="item"
            />
          </n-space>
        </n-checkbox-group> -->
      </div>
      <template #action class="">
        <div class="tr">
          <n-button @click="showModal = false"> 取消 </n-button>
        </div>
      </template>
    </n-modal>
  </div>
</template>
 <script lang='ts' setup>
import dxtable from "../../../components/util/dxtable.vue";
import sort from "../../../components/util/sort.vue";
import InstallationComponentManagement from "./InstallationComponentManagement.vue";
import { dxget, dxpost, qurl, hf } from "../../../util/index";
import { h, ref, reactive } from "vue";
import { NButton } from "naive-ui";
const cz = qurl();
const databale = ref();
const showModal = ref(null);
const dqItem = ref();
const getazjxz = ref([]); //安装件选择
const pupcheboxval = ref();
const checkedRowKeys = ref();
const initeer = () => {
  databale.value.initDataExpose();
};

// 弹窗公用该列表
let dataJson = reactive([
  {
    title: "机器序列号",
    key: "serialNumber",
  },
  {
    title: "AC项目号",
    key: "ACItemNumber",
  },
  {
    title: "项目名称",
    key: "projectName|serialNumber|ACItemNumber", //多个关键字搜索
    placeholder: "输入关键字查询",
    search: true, // 是否在搜索栏展示
    render(row) {
      return row.projectName;
    },
  },
  {
    title: "机型",
    key: "type",
    type: "select",
    options: [],
  },
  {
    title: "布置方式",
    key: "arrangementForm",
    type: "select",
    options: [],
  },
  {
    title: "验证码",
    key: "verificationCode",
  },
  {
    title: "验证有效期 ",
    width: "150",
    key: "periodOfValidity",
  },
  {
    title: "排序",
    width: 100,
    render(row) {
      row.databaseName = "kxinstall";
      return h(sort, {
        row,
        onCallBack: () => {
          initeer();
        },
      });
    },
  },
  {
    title: "创建时间",
    key: "addTime",
    width: "200",
    type: "daterange",
  },
]);
let portUrl = "kx/kxinstall";
const qx = {
  DeletePermissionID: "kxlistdel", //删除
  EditPermissionIdentifier: "kxlistbj", // 编辑
  NewPermissionIdentifier: "kxlistxz", // 新建
  ViewPermissionID: "kxlistck", // 查看
};

let formJson = reactive([
  {
    title: "机器序列号",
    key: "serialNumber",
    type: "input",
    required: true,
  },
  {
    title: "AC项目号",
    key: "ACItemNumber",
    type: "input",
    required: true,
  },
  {
    title: "项目名称",
    key: "projectName",
    type: "input",
    required: true,
    span: 24,
  },
  {
    title: "机型",
    key: "type",
    type: "select",
    options: [],
    required: true,
  },
  {
    title: "布置方式",
    key: "arrangementForm",
    type: "select",
    options: [],
    required: true,
  },
  {
    title: "验证码",
    key: "verificationCode",
    type: "input",
    required: true,
  },
  {
    title: "验证有效期 ",
    key: "periodOfValidity",
    type: "datetime",
    val: new Date(),
    required: true,
  },
  {
    title: "验证重复的验证码",
    key: "thenAdd",
    val: "verificationCode",
  },
  {
    title: "验证重复的验证码",
    key: "errmsg",
    val: "已存在相同的验证码",
  },
]);
const setXl = (text, data) => {
  const kjhaea = [];
  data.split(",").map((a) => {
    let obj = {
      label: a,
      value: a,
    };
    kjhaea.push(obj);
  });
  formJson.filter((a) => a.key == text)[0].options = kjhaea;
  dataJson.filter((a) => a.key == text)[0].options = kjhaea;
};

const initSelect = async () => {
  const { data }: any = await dxget("beRelieved/dictionaries?type=2", {
    id: 26,
  });
  if (data.dlabel) {
    setXl("type", data.dlabel);
  }

  const res: any = await dxget("beRelieved/dictionaries?type=2", {
    id: 27,
  });
  if (res.data.dlabel) {
    setXl("arrangementForm", res.data.dlabel);
  }
};
initSelect();
const czFun = {
  fun: (row) => {
    return [
      h(
        NButton,
        {
          type: "info",
          quaternary: true,
          onClick: async (e) => {
            showModal.value = true;
            dqItem.value = row;
            const { data }: any = await dxget(portUrl, { id: row.id });
            checkedRowKeys.value = [];
            if (data.installationParts.split(",")) {
              data.installationParts.split(",").map((a) => {
                checkedRowKeys.value.push(parseInt(a));
              });
            }
          },
        },
        "安装件选择"
      ),
    ];
  },
};
const callBack = async (data) => {
  const { errno }: any = await dxpost(
    portUrl,
    {
      id: dqItem.value.id,
      installationParts: data,
    },
    "put"
  );
  if (errno == 0) {
    window.$message.success("设置成功！");
  }
  showModal.value = false;
  initeer();
};
</script>
 <style scoped>
</style>


